<template>
	<div class="index">
		<div class="tabs rowSC mb-1 ml-3">
			<a v-for="item in tabsList" :key="item.key"
				:style="{ background: tabsCurrent === item.key ? '#1F6FE4' : '#1a3d83' }"
				@click="tabsChange(item.key)">{{ item.name }}</a>
		</div>
		<Mtable :columnData="columnData" :tableData="tableData" tableHeight="17em"></Mtable>
		
		<el-divider class="divider" border-style="dashed" />
		<div class="rowBC btm" v-for="item in rankingList" :key="item.key">
			<a class="name">{{ item.name }}</a>
			<a class="piece" :style="{ background: item.color }" />
			<a class="value">{{ item.value }}</a>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import {
		reactive,
		ref
	} from "vue"
	
	const tabsCurrent = ref(1)
	const tabsList = reactive < any > ([{
		name: '管养详情',
		key: 1
	}, {
		name: '洗消详情',
		key: 2
	}])
	
	const rankingList = reactive < any > ([{
		name: '站点综合评价',
		key: 1,
		value: '优',
		color: '#7fc434'
	}, {
		name: '站点排名',
		key: 2,
		value: 'NO.1',
		color: '#9ad2ee'
	}])
	
	const tabsChange = (e: number) => {
		tabsCurrent.value = e
	}
	
	const columnData = reactive < any > ([{
			label: '检查项目',
			key: 'equipment',
		},
		{
			label: '检查日期',
			key: 'time',
			width: '110px'
		},
		{
			label: '检查人员',
			key: 'lineName',
		},
		{
			label: '检查情况',
			key: 'checkStatus',
			width: '80px',
			color: (scope: any) => {
				return scope.row[scope.column.property] == 1 ? '#56ca95' : '#f90000'
			},
			value: (scope: any) => {
				return scope.row[scope.column.property] == 1 ? '正常' : '异常'
			}
		},
		{
			label: '处理状态',
			key: 'status',
			width: '80px',
			color: (scope: any) => {
				return scope.row[scope.column.property] == 1 ? '#ffffff' : '#f90000'
			},
			value: (scope: any) => {
				return scope.row[scope.column.property] == 1 ? '无' : '未上报'
			}
		}
	])

	const tableData = [{
			equipment: '料斗超时未关',
			lineName: '卡位01',
			time: '2022.12.20.10:35',
			tdpb: '张三',
			checkStatus: 0,
			status: 1,
		},
		{
			equipment: '料斗超时未关',
			lineName: '卡位01',
			time: '2022.12.20.10:35',
			tdpb: '张三',
			checkStatus: 1,
			status: 0,
		},
		{
			equipment: '料斗超时未关',
			lineName: '卡位01',
			time: '2022.12.20.10:35',
			tdpb: '张三',
			checkStatus: 1,
			status: 1,
		},
		{
			equipment: '料斗超时未关',
			lineName: '卡位01',
			time: '2022.12.20.10:35',
			tdpb: '张三',
			checkStatus: 1,
			status: 0,
		},
		{
			equipment: '料斗超时未关',
			lineName: '卡位01',
			time: '2022.12.20.10:35',
			tdpb: '张三',
			checkStatus: 0,
			status: 1,
		},
		{
			equipment: '料斗超时未关',
			lineName: '卡位01',
			time: '2022.12.20.10:35',
			tdpb: '张三',
			checkStatus: 1,
			status: 0,
		},
		{
			equipment: '料斗超时未关',
			lineName: '卡位01',
			time: '2022.12.20.10:35',
			tdpb: '张三',
			checkStatus: 1,
			status: 1,
		}
	]

</script>

<style scoped lang="scss">
	.index {
		.tabs {
			a {
				border-radius: 0.3em;
				padding: 0.2em 0.6em;
				margin: 0.1em 0.3em;
				font-size: 0.9em;
			}
		}
		.name {
			width: 6em;
		}
		.piece {
			width: 20em;
			height: 0.7em;
			border-radius: 0.1em;
		}
		.value {
			width: 2.2em;
		}
		.divider {
			border-color: #16468d;
			margin: 1.5em 0 0.625em;
			font-size: 0.8em;
		}
		.btm {
			font-size: 0.8em;
		}
	}
</style>
